<template>
  <div id="app" >
      <div v-html="myheader"></div> 
      <h4>循环渲染数组,并且将index能整除2(第二项)添加一个class</h4>
      <ul>
        <li v-for="(item,index) in list" v-bind:class="{odd:index % 2}" >
          {{index}}-{{item.name}}-{{item.price}}
        </li>
      </ul>
      <h4>循环渲染对象，遍历键值对</h4>
       <button v-on:click="addItem">addItem</button>
      <ul>
        <li v-for="(value,key) in objList">
          {{key}} :   {{value}} 
        </li>
      </ul>

      <h4>根据data绑定属性href,title,多个class,和样式style</h4>
      <a v-bind:href="link" :title="myheader" :class="[color,size]" :style="linkCss" >to Baidu </a>
      <h5>toggle示例。条件渲染</h5>

      <p>//v-else可以配合v-if和v-show来使用使用v-if的话，隐藏时会从文档流里删除。而v-show只是display=none</p>
      <button @click='toggle'>toggle</button><button @click='isshow'>show?</button>
      <br>
      <a v-if="isShow" :style="linkCss" >Show me??</a>
      <a v-else> or Show his???</a> 
      <br>
      <a v-show="display" :style="linkCss" >you can see?</a>

      <h4>子组件渲染,并且循环</h4>
      <componentA  v-for="(value,key) in objList" v-bind:key="key"></componentA> //重复了n次。

      <h4>使用is渲染组件。可以实现动态组件</h4>
      <div :is="comToRender"></div>    //只需要更新comToRender的值，就可以动态渲染该组件 
                          //可以使用keep-alive把这个div包裹起来。实现缓存，从而加快下次的渲染速度
      <div :is="comToRender2"></div>
      <component-a></component-a>

    <h6>监听ENTER键盘输入事件</h6>
      <input  @keydown.enter="onKeyDown">

      <br>
      <h4>  子组件的自定义事件绑定和触发。</h4> 
      <componentA @my-event="onComaMyEvent"></componentA>  //注意事件绑定不能用驼峰，只能用小写+‘-’
     
     <h5>v-model的四种绑定</h5>
        动态,双向数据绑定(默认)：<input v-model="myValue" type="text">  
        <br>     
       懒绑定.lay：<input v-model.lazy="myValue" type="text">
       <br>
       数组绑定.number:(转换成数字)<input v-model.number="myValue" type="text">
       <br>
       空格忽略绑定.trim：<input v-model.trim="myValue" type="text">
       <br>
       {{myValue}}+"类型是"+{{typeof myValue}}    

        <br>
        <h2>表单：</h2>
        <h4>多选框：</h4>
           {{myBox}}
           <br>
        <input type="checkbox" v-model="myBox" value="apple">
        <input type="checkbox" v-model="myBox" value="banana">
        <input type="checkbox" v-model="myBox" value="pinapple">
     

        <h4> 单选：</h4>

        <input type="radio" v-model="myBox" value="apple">
        <input type="radio" v-model="myBox" value="banana">
        <input type="radio" v-model="myBox" value="pinapple">

        <h4> 选项：</h4>
 
        <select v-model="selection">
          <option v-for="item in selectOptions" :value="item.value">{{item.text}}</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>          
        </select>
        {{selection}}
        <br>
        <h4>计算属性</h4>
        
        <input type="text" v-model="mybeforCompute">
        {{myComputed}}
        {{getVluex2()}}
        <!-- <vSelect @onSelect="" :list="selectOptions"></vSelect>  -->
        <h4>属性监听,数据动态改变监听</h4>
        <input type="text" v-model="watchVal">

        <h4>组件之间的通信</h4>
        <h3>父组件向子组件传递数据</h3>
        <!-- 传递属性名不区分大小写，应使用-分隔符区分单词 -->
        <component-a  passmsg=" 我是父组件传进来的" number-to-do='999'></component-a>  //因为number-to-do期待数字格式，而属性里面传的都是字符串，因此无法渲染。
        <h5>动态传递实例</h5>
        <input type="text" v-model="toVal">  //可以使用v-model.number只传递数字格式
        <component-a :to-val="toVal">
        //通过slot标签，实现插槽功能：父组件向子组件插入模板
          <p slot="header">xxxx  header</p>
          <p slot="footer">yyyy  footer</p>   
        </component-a>
  </div>
</template>

<script>
import Vue from 'vue'
import componentA from '../components/a.vue'
export default {
  components: { 
     componentA: componentA  //可以简写为componentA  ，使用时不区分大小写。可以使用 - 分隔
  },
  data(){
    return {
      toVal:'',
      comToRender:componentA,  
      comToRender2:"component-a",
      display:false,
      watchVal:'',
      mybeforCompute:"",
      selectOptions:[
        {
          text:'apple',
          value:0
        },
        {
          text:'banana',
          value:1
        }
      ],
      selection:null,
      myBox:[],
      myheader: "<h1>John's fruit store</h1>",
      link:'http://www.baidu.com',
      color:'red-font',
      size:{
        "yellow-font":  true,
        "blue-font": false
      },
      isShow: true,
      linkCss:{
        'color':'red',
        'font-size':20
      },
      list: [
          {
            name: 'apple',
            price: 34
          },
          {
            name: 'banana',
            price : 42
          },
          {
            name: 'stawberray',
            price: 16
          }
        ],
        objList: {
            name: 'John snow',
            title:'the Dragon Mother Fucker',
            age: 34,
            gender: 'man'
        },
        myValue:''
    }
  },
  methods:{
      addItem(){
           //不会动态更新时候
        Vue.set(this.list,1,{
          name:'pinaaple',
          price:23
       })
 
        console.log(this.list);
        this.linkCss.color = 'blue'
    },
    toggle(){
      this.isShow = !this.isShow
    },
    isshow(){
      this.display = !this.display
    },
    onKeyDown(){
      console.log("key down")
    },
    onComaMyEvent(parmfromA){
      console.log("onComaMyEvent!"+'pama:'+parmfromA)
    },
    getVluex2(){
      return  this.mybeforCompute*2
    }

  },
  computed: {
    myComputed(){
      return  this.mybeforCompute*2
    }
  },
  watch: {
    watchVal: function(val,oldVal){
      console.log(val,oldVal)
    }
  },
  objList:function(){
   //可以监听objList列表的任何更改
  }
}
</script>

<style>
  html{
    height: 100%;
  }
  .odd{
    font-size:20px;
    font:bolder;
    color:blue
  }
</style>
